<!--  -->
<template>
  <div class="previews">
    <div class="searchHead">
      <el-image
        v-show="isSelectFile === true"
        class="return return-icon"
        style="width: 22px; height: 16px"
        :src="require('@/assets/back_icon.png')"
        @click="onReturn"
      />
      <p class="text hover_underLine" @click="onReturn">资料</p>

      <div v-show="isSelectFile === true" class="NavBar">
        <p class="text" style="margin: 0 10px;">></p>
        <!-- <p class="text">资料</p>
        <p class="text return next">></p> -->
        <p class="text max-width">{{ selectFilename }}</p>
      </div>

      <div class="search">
        <el-input
          v-model="searchKey"
          prefix-icon="el-icon-search"
          placeholder="请输入关键词进行搜索"
          @input="onSearchInput"
        />
      </div>
    </div>

    <div v-loading="loading" class="previewContent">
      <ul v-show="isSelectFile === false">
        <li v-for="(item,index) in filesList" :key="index" class="" @click="onSelectFile(item)">
          <i class="el-icon-document file-icon" />
          <p class="file-name">{{ item.filename }}</p>
        </li>
      </ul>

      <iframe
        v-show="isSelectFile === true"
        ref="iframe"
        :src="iframeSrc"
        frameborder="0"
        class="iframeStyle"
      />

      <div v-show="isNoneFile" class="noneFile">
        <el-image
          style="width: 383px; height: 350px"
          :src="require('@/assets/404_images/noneFile.png')"
        />

        <p class="noneTest">
          查无此文档
        </p>
      </div>

    </div>
  </div>
</template>

<script>
import { material_list } from '@/api/material'
import { deleteHttp } from '@/utils/index'
export default {
  name: 'Previews',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      isNoneFile: false,
      selectFilename: '',
      filesList: [],
      searchKey: '',
      loading: false,
      isSelectFile: false,
      iframeSrc: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    await this.getFilesData()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  // 生命周期 - keep-alive
  async activated() {
    // await this.getFilesData()
  },
  // 方法集合
  methods: {
    async getFilesData(keyword = '') {
      try {
        this.loading = true
        const param = {
          filetype: '4',
          keyword
        }
        const res = await material_list(param)
        console.log(res)
        const { code, data } = res
        if (code === 0) {
          this.handleFilesData(data)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 处理返回数据
    handleFilesData(data) {
      const dataLength = data.length
      // 数据赋值
      this.filesList = data
      if (dataLength === 0) {
        this.isNoneFile = true
      } else {
        this.isNoneFile = false
      }
    },
    // 输入框搜索
    async onSearchInput(val) {
      // TODO 请求数据
      await this.getFilesData(val)
    },
    onReturn() {
      this.loading = true
      this.isSelectFile = false

      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    onSelectFile(item) {
      this.isSelectFile = true
      this.loading = true

      // 获取文件格式
      const { mimetype, url, filename } = item
      this.selectFilename = filename

      if (mimetype !== 'pdf') {
        // word、excel、ppt
        const iframeSrc = deleteHttp(url)
        this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${iframeSrc}`
        console.log(this.iframeSrc)
      } else {
        this.iframeSrc = url
      }

      this.loading = false
    },
    onSearch() {

    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next(vm => {

    })
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
    .searchHead {
      width: 680px;
      height: 48px;
      background: #F7F7F7;
      border: 1px solid #E4E4E4;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      padding-left: 30px;

      .return {
        margin-left: 12px;
        margin-right: 12px;
      }

      .return-icon {
        cursor: pointer;
      }

      .next {
        position: relative;
        bottom: 1px;
      }

      .text {
        font-size: 16px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #000000;
      }
      .max-width {
        width: 220px;
        @include Omitted();
      }
      .search{
        width: 280px;
        height: 35px;
        position: absolute;
        top: 6px;
        right: 29px;
        ::v-deep .el-input__inner{
          border-radius: 30px;
          height: 35px;
          line-height: 35px;
          border: 1px solid #e4e4e4;
        }

        ::v-deep .el-tree-node__content{
          height: 38px;
        }

      }

      .NavBar {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }

    .previewContent {
      height: calc(100vh - 120px);
      overflow: auto;
      &>ul {
        list-style: none;
        padding-left: 0;

      }

      li {
        display: flex;
        align-items: center;
        height: 38px;
        padding-left: 30px;
        cursor: pointer;

        .file-icon {
          font-size: 14px;
          color: #666666;
        }

        .file-name {
          margin-left: 12px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }

      li:hover {

        background: #fbfbfb;

        .file-icon {
          color: #000000;
          font-weight: bold;
        }
        .file-name {
          color: #000000;
          font-weight: bold;
        }
      }

      .iframeStyle {
        width: 100%;
        height: calc(100vh - 120px);
      }
    }

    .noneFile {
      text-align: center;
      margin-top: 151px;
      .noneTest {
        font-size: 16px;
        font-weight: 500;
        color: #999999;
        line-height: 24px;
      }
    }
    .hover_underLine:hover{
      text-decoration: underline;
      cursor: pointer;
    }
</style>
